<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>商品管理</title>
	<link rel="stylesheet" type="text/css" href="../lib/mui/css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css">
</head>
<body>
	<!-- 侧滑导航根容器 -->
	<div class="mui-off-canvas-wrap mui-draggable mui-slide-in" id="offCanvasSide">
	  	<!-- 菜单容器 -->
	 	<aside class="mui-off-canvas-right ">
	    	<div class="mui-scroll-wrapper">
	      		<div class="mui-scroll">
	        		<!-- 菜单具体展示内容 -->
	        		<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">Item 1</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">Item 2</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">Item 3</a>
						</li>
					</ul>
	      		</div>
	    	</div>
	  	</aside>

	  	<!-- 主页面容器 -->
		<div class="mui-inner-wrap">

			<!-- 主页面头部 -->
		    <header class="mui-bar mui-bar-nav scm-nav-black">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><span>返回</span></a>
				<h1 class="mui-title">商品管理</h1>
				<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-more mui-pull-right"></a>
			</header>

			<!-- 主页面底部 -->
			<nav class="mui-bar mui-bar-tab scm-bar-green">
				<a class="mui-tab-item mui-active newLink" href="./my_goods_edit.html">
					<span class="mui-tab-label">+ 新增商品</span>
				</a>
			</nav>
			
			<!-- 主页面body -->
			<div class="mui-content mui-scroll-wrapper" id="muis">
				<!-- 滚动容器 -->
				<div class="mui-scroll">
					<!-- 正文 -->

					<!-- 筛选框 -->
					<div class="scm-search">
						<a class="label-l mui-icon mui-icon-search"></a>
						<a href="#pop" class="label-r">筛选<i class="mui-icon mui-icon-arrowdown"></i></a>
					    <input type="search" class="" placeholder="搜索">
					    
					</div>

					<!-- 商品列表 -->
					<div class="scm-list  no-margin">
						<ul class="">
							<li class="list-item">
								<a class="goods clear newLink" href="./my_goods_detail.html">
									<img src="../img/1.png">
									<h2 class="title">原产北美贝因美奶粉</h2>
									<p class="price">￥100 - ￥300</p>
									<p class="status clear"><span>3种规格</span> <span>已上架</span></p>
								</a>
							</li>
							<li class="list-item">
								<a class="goods clear newLink" href="./my_goods_detail.html">
									<img src="../img/1.png">
									<h2 class="title">原产北美贝因美奶粉</h2>
									<p class="price">￥100 - ￥300</p>
									<p class="status clear"><span>3种规格</span> <span>已上架</span></p>
								</a>
							</li>
							
							<li class="list-item">
								<a class="goods clear newLink" href="./my_goods_detail.html">
									<img src="../img/1.png">
									<h2 class="title">原产北美贝因美奶粉</h2>
									<p class="price">￥100 - ￥300</p>
									<p class="status clear"><span>3种规格</span> <span>已上架</span></p>
								</a>
							</li>
							
							<li class="list-item">
								<a class="goods clear newLink" href="./my_goods_detail.html">
									<img src="../img/1.png">
									<h2 class="title">原产北美贝因美奶粉</h2>
									<p class="price">￥100 - ￥300</p>
									<p class="status clear"><span>3种规格</span> <span>已上架</span></p>
								</a>
							</li>
							
							<li class="list-item">
								<a class="goods clear newLink" href="./my_goods_detail.html">
									<img src="../img/1.png">
									<h2 class="title">原产北美贝因美奶粉</h2>
									<p class="price">￥100 - ￥300</p>
									<p class="status clear"><span>3种规格</span> <span>已上架</span></p>
								</a>
							</li>
							
							<li class="list-item">
								<a class="goods clear newLink" href="./my_goods_detail.html">
									<img src="../img/1.png">
									<h2 class="title">原产北美贝因美奶粉</h2>
									<p class="price">￥100 - ￥300</p>
									<p class="status clear"><span>3种规格</span> <span>已上架</span></p>
								</a>
							</li>
							<li class="list-item">
								<a class="goods clear newLink" href="./my_goods_detail.html">
									<img src="../img/1.png">
									<h2 class="title">原产北美贝因美奶粉</h2>
									<p class="price">￥100 - ￥300</p>
									<p class="status clear"><span>3种规格</span> <span>已上架</span></p>
								</a>
							</li>
							<li class="list-item">
								<a class="goods clear newLink" href="./my_goods_detail.html">
									<img src="../img/1.png">
									<h2 class="title">原产北美贝因美奶粉</h2>
									<p class="price">￥100 - ￥300</p>
									<p class="status clear"><span>3种规格</span> <span>已上架</span></p>
								</a>
							</li>
							
						</ul>
					</div>
				</div>
			</div>
			
			<!-- 遮挡层 -->
			<div class="mui-off-canvas-backdrop"></div>
			
		</div>

	</div>	

	<!-- 搜索选项 -->
	<div id="pop" class="mui-popover scm-popover">
	  <ul class="mui-table-view">
	    <li class="mui-table-view-cell"><a href="#">库存</a></li>
	    <li class="mui-table-view-cell"><a href="#">价格</a></li>
	    <li class="mui-table-view-cell"><a href="#">销量</a></li>
	  </ul>
	</div>
	<!-- popover -->
	<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
		<div class="scm-list">
			<ul>
				<li class="list-item">
					<h3 class="title">分销商名称</h3>
					<span class="name">贝因美江苏代理</span>
				</li>
				<li class="list-item">
					<h3 class="title">选择销售等级</h3>
					<ul class="mui-table-view-radio">
						<li class="mui-table-view-cell mui-selected">
							<a class="mui-navigate-right">A级</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">B级</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">C级</a>
						</li>
					</ul>
				</li>
				<li class="list-item">
					<h3 class="title">选择付款方式</h3>
					<ul class="mui-table-view-radio">
						<li class="mui-table-view-cell mui-selected">
							<a class="mui-navigate-right">即时付款</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">非即时付款</a>
						</li>
					</ul>
				</li>
				<li class="list-item end">
					<span class="scm-btn-lg green tigger-popover">确定</span>
				</li>
			</ul>
		</div>
	</div>	
	<script type="text/javascript" src="../lib/mui/js/mui.min.js"></script>
	<script type="text/javascript" src="../js/base.js"></script>
	<script type="text/javascript">
		mui('#muis').scroll();
		mui('body').on('click', '.tigger-popover', function(){
			mui('#picture').popover('toggle');
		});

	</script>
</body>
</html>